<template>
	<hyb-page :title="info.s_name">
		<!-- 请开始您的开发 ~ -->
		<template v-slot:body>
			<view class="gui-list gui-padding-x" :style="{'background':base.qjcolor}">
				<view class="gui-list-items">
					<image style="height: 140rpx; width: 140rpx; border-radius: 50%;" :src="info.s_thumb"
						mode="aspectFill">
					</image>
					<view class="gui-list-body">
						<view class="gui-color-white gui-flex gui-margin-top2">
							<text class="gui-list-title-text2 gui-color-white">{{info.s_name}}</text>
						</view>
                        
                        <view class="gui-list-body-desc gui-margin-top1">
                        	<text class="gui-color-white gui-flex1">营业时间：{{info.s_yingyetime}}</text>
                        </view>
						<view class="gui-list-body-desc gui-margin-top1">
							<view class="gui-color-white gui-flex">
								<text class="gui-color-white gui-flex1">好评率：100%</text>
								<text class="gui-color-white gui-flex1">已服务：{{info.order_count}}单</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="swiperItems.length>0" class="gui-bg-white">
				<gui-swiper :spacing="0" borderRadius="0" :swiperItems="swiperItems" :width="750" :height="375">
				</gui-swiper>
			</view>


			<view class="gui-padding">
				<view class="gui-text gui-bold">
					{{info.s_name}}
				</view>

				<view class="gui-flex gui-space-between gui-text-small gui-align-items-center">
					<view>
						{{info.s_address}}
					</view>


					<view class="gui-flex gui-align-items-center">
						<view @tap="openShare" style="margin-right: 40rpx;" class="gui-text-center">
							<view type="defaul" class="product-share gui-icons gui-color-orange  gui-noborder"
								style="font-size: 40rpx;">&#xe606;</view>
							<view class="gui-color-orange">分享</view>
						</view>
						<view @tap="openMap" class="gui-text-center">
							<image style="width: 40rpx;height:40rpx;" src="/static/daohang.png"></image>
							<view class="gui-primary-color">导航</view>
						</view>
					</view>

				</view>
			</view>

			<view class="gui-bg-white gui-dark-bg-level-3 gui-margin-x-middle gui-padding">
				<gui-switch-navigation :currentIndex="navIndex" :items="$store.state.base.sjzx_type_arr"
					@change="navchange" textAlign="center" :isCenter="true" activeDirection="center" :size="0"
					:margin="20" padding="30rpx"></gui-switch-navigation>
			</view>

			<view class="gui-margin-middle" v-if="id==0">
				<navigator  
					v-for="(item,index) in fuwus" :key="index"
					:url="'/hyb_o2o/addpages/pages/detail/detail?id=' + item.x_id + '&g_lbt_cc=' +item.g_lbt_cc">
					
					<view class="gui-list-items gui-bg-white gui-padding-x-middle gui-border-radius-large gui-margin-top-small">
					<view class="gui-relative">
						<image class="gui-border-radius" style="height: 200rpx;width: 200rpx;" mode="scaleToFill"
							:src="item.x_thumb">
						</image>
					</view>
					<view class="gui-list-body ">
						<view class="gui-list-title">
							<text class="gui-text">{{item.x_name}}</text>
						</view>
						<view class="gui-color-red gui-margin-top gui-text-small gui-bold">￥{{item.x_jiage}}</view>

						<view class="gui-list-body-desc gui-margin-top-middle">
							<view><text class="gui-icons gui-color-blue gui-text">&#xe62f;</text>
								{{item.orders_count}}单
							</view>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-color-gray-light gui-icons">&#xe601;</text>
				</view>
				</navigator>

				<hyb-empty v-if="fuwus.length==0"></hyb-empty>
			</view>



            <view v-else-if="id==1" class="goods-area">
                <view class="goods-layout">
                    <!-- 左侧分类 -->
                    <scroll-view class="goods-categories" scroll-y>
                        <view :class="['cat-item', currentCatId===0?'active':'']" @tap="changeCat(0)">全部</view>
                        <view v-for="cat in goodsCategories" :key="cat.id"
                              :class="['cat-item', currentCatId===cat.id?'active':'']"
                              @tap="changeCat(cat.id)">
                            {{cat.title}}
                        </view>
                    </scroll-view>

                    <!-- 右侧商品列表 -->
                    <scroll-view class="goods-list" scroll-y>
                        <view v-for="(item, index) in products" :key="index" class="goods-card">
                            <image class="goods-thumb" mode="aspectFill" :src="item.g_thumb"></image>
                            <view class="goods-info">
                                <view class="goods-name">{{item.g_name}}</view>
                                <view class="goods-sub gui-text-small gui-color-gray">已售 {{item.g_xiaoliang}}</view>
                                <view class="goods-price">
                                    <text class="price">￥{{item.g_jiage}}</text>
                                    <text v-if="$store.state.base.xhxjg" class="origin">￥{{item.g_yjiage}}</text>
                                </view>
                            </view>
                            <view class="goods-action">
                                <text class="spec-btn" @tap.stop="gotoInfo(index, item)">立即下单</text>
                            </view>
                        </view>

                        <hyb-empty v-if="products.length==0"></hyb-empty>
                    </scroll-view>
                </view>
            </view>


			<view class="gui-padding" v-else-if="id==2">
				<hyb-rich-text :content="info.s_content"></hyb-rich-text>
			</view>


			<view class="gui-padding" v-else-if="id==3">
				<hyb-comments v-if="info.pingjias.length>0" :list="info.pingjias"></hyb-comments>
				<hyb-empty v-else></hyb-empty>
			</view>

			<hyb-poster width="400px" height="400px" ref="poster"></hyb-poster>

		</template>
	</hyb-page>
</template>
<script>
	export default {
		data() {
			return {
				base: null,
				navIndex: -1,
				id: 0,
				types: null,
				navItems: [{
						name: '服务'
					},
					{
						name: '商品'
					},
					// {
					// 	id: 2,
					// 	name: '套餐'
					// },
					{
						name: '介绍'
					},
					{
						name: '评价'
					}
				],
				info: {
					title: ''
				},
				swiperItems: [],
				fenxiao: null,
                products: [],
                page: 1,
                last_page: 1,
                goodsCategories: [],
                currentCatId: 0,
                fuwus: [],
				f_page: 1,
				f_last_page: 1,
			}
		},

		onReachBottom() {
			if (this.id == 1) {
				if (this.last_page > this.page) {
					this.page++;
					this.query_products()
				}
			} else if (this.id == 0) {
				if (this.f_last_page > this.f_page) {
					this.f_page++;
					this.query_fuwus()
				}
			}
		},


		onLoad(options) {



			if (options.f_parentid) {
				uni.storage.set("f_parentid", options.f_parentid)
			}
			this.base = uni.storage.get("base");
			uni.gPost("fenxiao/user").then((info) => {
				if (info) {
					this.fenxiao = info;
				}
			})
			uni.gPost("shangjia/info", {
				id: options.id
			}).then((info) => {
				this.info = info;

				if (this.info.s_imgpath) {
					this.info.s_imgpath.forEach((item) => {
						this.swiperItems.push({
							img: item,
							url: "",
							title: "",
							opentype: 'navigate'
						})
					})
				}


				let navIndex = this.$store.state.base.sjzx_type_arr.findIndex((val) => {
					return val.default == 1
				})
				if (navIndex == -1) navIndex = 0;
				this.navchange(navIndex)
			})

		},


		// #ifdef MP
		onShareAppMessage() {
			let path = "/hyb_o2o/shangjia/info/info?id=" + this.info.s_id;
			if (this.fenxiao) {
				path = path + "&f_parentid=" + this.fenxiao.f_id
			}
			return {
				title: this.info.s_name, //分享的标题
				path: path,
				imageUrl: this.info.s_thumb,
			};
		},
		//#endif
		methods: {

			query_products(page) {
				if (page) this.page = 1;
				if (this.page == 1) {
					this.products = [];
				}


                uni.gPost("goods/list", {
                    page: this.page,
                    paginate: 1,
                    g_s_id: this.info.s_id,
                    styles: this.currentCatId ? [this.currentCatId] : undefined
                }).then((res) => {
					this.last_page = res.last_page;
					res.data.forEach(item => {
						this.products.push(item);
					})
				})
			},
            query_goods_categories() {
                uni.gPost("goods/styles").then((list) => {
                    const cats = [];
                    list.forEach(p => {
                        if (p.children && p.children.length) {
                            p.children.forEach(c => cats.push({ id: c.id, title: c.title }))
                        } else {
                            cats.push({ id: p.id, title: p.title })
                        }
                    })
                    this.goodsCategories = cats;
                })
            },
            changeCat(id) {
                if (this.currentCatId === id) return;
                this.currentCatId = id;
                this.query_products(true);
            },
            gotoInfo(index, item) {
                uni.navigateTo({
                	url: "/hyb_o2o/subpagesA/pages/goods/goods?id=" + item.g_id
                });
                
            },
			query_fuwus(page) {
				if (page) this.f_page = 1;
				if (this.f_page == 1) {
					this.fuwus = [];
				}


				uni.gPost("fuwu/list", {
					page: this.f_page,
					x_shangjia: this.info.s_id
				}).then((res) => {
					this.f_last_page = res.last_page;
					res.data.forEach(item => {
						this.fuwus.push(item);
					})
				})
			},


			openShare() {
				uni.showActionSheet({
					itemList: ["转发", "二维码推广"],
					success: (res) => {
						let path = "/hyb_o2o/shangjia/info/info?id=" + this.info.s_id;
						if (this.fenxiao) {
							path = path + "&f_parentid=" + this.fenxiao.f_id
						}
						// #ifdef h5
						let url = window.location.href.split("#")[0] + "#" + path
						// #endif

						if (res.tapIndex == 0) {
							// #ifdef MP
							uni.showToast({
								title: "请点击右上角分享!",
								icon: "none"
							})
							return;
							// #endif

							// #ifdef H5

							//公众号分享
							if (uni.$jswx.isWechat()) {
								uni.$jswx.wxShare({
									title: this.base.name,
									url: url,
									content: this.info.s_name,
									image: this.info.s_thumb
								}).then((flag) => {
									if (flag) {
										uni.showToast({
											title: "请点击右上角分享!",
											icon: "none"
										})
									}
								})
							} else {
								uni.setClipboardData({
									data: url
								})
								uni.showToast({
									title: "分享地址已复制!",
									icon: "none"
								})
							}
							// #endif
						} else if (res.tapIndex == 1) {
							// #ifdef H5
							let items = [{
								type: "qrcode",
								text: url,
								x: 20,
								y: 20,
								width: 360
							}];

							this.$refs.poster.make(items).then((src) => {
								uni.previewImage({
									urls: [src]
								})
							})
							// #endif

							// #ifdef MP
							let qrcode =
								'https://xjz.cyygkj.cn/api/mp/qrcode?path=' + encodeURIComponent(path) +
								'&uniacid=' + this.$store.state.base.uniacid
							uni.previewImage({
								urls: [qrcode]
							})
							// #endif
						}
					}
				})
			},
			openMap() {
				uni.openLocation({
					latitude: parseFloat(this.info.latitude),
					longitude: parseFloat(this.info.longitude)
				})
			},

			navchange(index) {
				console.log(index)
				this.navIndex = index;
				this.id = this.$store.state.base.sjzx_type_arr[this.navIndex].id;
                if (this.id == 1 && this.products.length == 0) {
                    // 先加载分类
                    if (this.goodsCategories.length == 0) this.query_goods_categories();
                    this.query_products()
				} else if (this.id == 0 && this.fuwus.length == 0) {
					this.query_fuwus()
				}
			}
		}
	}
</script>
<style scoped>
	.gui-grid-item {
		padding: 20rpx 0;
		flex: 1 1 25%;
	}

	.gui-ic-image {
		width: 68rpx;
		height: 68rpx;
		margin-bottom: 10rpx;
	}

	.gui-product {
		width: 345rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;
	}

	.gui-product-lines {
		margin-top: 10rpx;
	}

	.gui-product-name {
		font-size: 28rpx;
		line-height: 32rpx;
	}

  /* 新增：商品分类+列表布局 */
  .goods-area {
    padding: 0 16rpx;
  }
  .goods-layout {
    display: flex;
    height: 70vh; /* 统一高度，避免内外滚动冲突导致抖动 */
  }
  .goods-categories {
    width: 180rpx; /* 固定列宽，显示4个字空间 */
    background: #f7f7f7;
    border-radius: 12rpx;
    padding-top: 8rpx;
  }
  .cat-item {
    padding: 22rpx 16rpx;
    font-size: 26rpx;
    color: #666;
    white-space: nowrap;         /* 横向显示 */
    overflow: hidden;            /* 超出隐藏 */
    text-overflow: ellipsis;     /* 显示省略号 */
  }
  .cat-item.active {
    background: #ffffff;
    color: #333;
    font-weight: 600;
    border-left: 6rpx solid #FF9F00;
  }
  .goods-list {
    flex: 1;
    margin-left: 16rpx;
  }
  .goods-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    padding: 12rpx;             /* 减少卡片内边距，缩小图片四周空白 */
    margin-bottom: 16rpx;
    box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.04);
    position: relative; /* 让右下角按钮绝对定位 */
  }
  .goods-thumb {
    width: 160rpx;              /* 略增尺寸，弱化留白感 */
    height: 160rpx;
    border-radius: 12rpx;
  }
  .goods-info {
    flex: 1;
    margin: 0 16rpx;
    padding-right: 16rpx;     /* 允许标题铺满到最右侧 */
    padding-bottom: 60rpx;    /* 为右下角按钮预留垂直空间，避免遮挡 */
  }
  .goods-name {
    font-size: 28rpx;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* 最多两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;          /* 强制长词换行，避免挤压图片 */
  }
  .goods-sub {
    margin-top: 6rpx;
  }
  .goods-price {
    margin-top: 10rpx;
    display: flex;
    align-items: baseline;
  }
  .price {
    color: #ff4d4f;
    font-weight: 700;
    margin-right: 8rpx;
  }
  .origin {
    color: #999;
    text-decoration: line-through;
    font-size: 24rpx;
  }
  .goods-action {
    position: absolute;
    right: 16rpx;
    bottom: 16rpx;
  }
  .goods-action .spec-btn {
    color: #fff;
    background: #ff9f00;
    padding: 8rpx 18rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
  }
</style>